<template>
  <div>
    <div
        style="overflow:hidden;background-image: url(public/imgs_wly/man.jpg);background-repeat: no-repeat;background-size: cover;width:100%;height: 590px;">
      <el-image
          style="width: 100%; height: 100%"
          src="/imgs_wly/man.jpg"
          fit="cover"></el-image>
    </div>
    <div style="margin:50px 0px"><p id="foot"> 医疗设备 </p></div>
    <div id="cat">


      <div class="ti">
        <div id="house"><img style="vertical-align: middle;margin-right: 10px" src="../assets/imgs_wly/house.png"
                             alt="">首页>医疗设备
        </div>

        <div style="width: 1200px; height: 965px;margin: 0 auto;display: flex;">

          <div>
            <div class="sig">
              <img src="../assets/imgs_wly/z1.jpg" alt="" style="overflow: hidden;margin-right: 50px">
              <div><p class="ht">GE C形臂</p></div>
            </div>
            <div class="sig">
              <img src="../assets/imgs_wly/z2.jpg" alt="" style="overflow: hidden;">
              <div><p class="ht">PHILIPS 心脏彩超</p></div>
            </div>
          </div>
          `

          <div>
            <div class="sig">
              <img src="../assets/imgs_wly/y1.jpg" alt="" style="">
              <div><p class="ht">64排128层PHILIPS CT</p></div>
            </div>
            <div class="sig">
              <img src="../assets/imgs_wly/y2.jpg" alt="">
              <div><p class="ht">德国莱卡 手术显微镜</p></div>
            </div>
          </div>
        </div>
        <div id="xj">
          <a href="" style="background-image: url(/imgs_wly/xj.png)">1</a>
          <a href="" style="background-image: url(/imgs_wly/hxj.png)">2</a>
          <a href="" style="background-image: url(/imgs_wly/hxj.png)">3</a>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "ArmariumView"  //医疗设备
}
</script>

<style scoped>
body {
  margin: 0px auto;
}

body > div {
  width: 100%;
  position: relative;
}

a {
  margin-right: 25px;
  font-size: 18px;
  text-decoration: none;
  color: #333333
}

#foot {
  width: 100%;
  text-align: center;
  font-size: 36px;
  color: #5a5a5a;
  font-weight: bold;
  background: url(../assets/imgs_wly/foot.png) no-repeat center bottom;
  height: 90px;
}

#cat {
  background: url(../assets/imgs_wly/cat.jpg) no-repeat right bottom;
  height: auto;
  overflow: hidden;
}


.ti {
  width: 1250px;
  height: 1400px;
  margin: 0 auto;
}

#house {
  width: 200px;
  height: 40px;
  color: #525252;
  font-size: 14px;
  margin-left: 1340px;
  float: right;
}

.sig > img {
  width: 580px;
  height: 372px;
  overflow: hidden;


}

.sig img:hover {
  transform: scale(1.1);
  transition-duration: 1.25s;
}


.ht {
  width: 580px;
  font-size: 24px;
  color: #fff;
  background-color: #555555;
  line-height: 70px;
  text-align: center;
  position: relative;
  bottom: 30px;
}

#xj {
  position: relative;
  left: 550px;

}

#xj > a {
  display: inline-block;
  color: #fff;
  text-align: center;
  height: 43px;
  width: 44px;
  line-height: 60px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  outline: none;

}

#xj a:hover {
  transform: scale(1.1);
  transition-duration: 1.25s;
  background-image: url(../assets/imgs_wly/xj.png) !important;
}
</style>